<template>
	<div id="app">
		<div class="footer">
			   <dl class="home" v-for="(item,index) in routers" :key="index">
				 <dt>
				 	<router-link :to="{name:item.hrefname,params:{userId:item.par}}">
			       <svg class="one" aria-hidden="true">
				     <use :xlink:href="item.svg"></use>
				   </svg>
				   </router-link>
					</dt>
					<dd class="footernav">
						<router-link :to="{name:item.hrefname,params:{userId:item.par}}">
						  {{item.urlname}}																																																																																																							
					    </router-link>
					</dd>
				</dl>
		</div>
	</div>
</template>

<script>
export default{
	data(){
		return {
			routers:[
				{urlname:'首页',hrefname:'home',par:'1',svg:'#icon-shouye'},
				{urlname:'分类',hrefname:'type',par:'2',svg:'#icon-fenlei'},
				{urlname:'穿搭',hrefname:'collo',par:'3',svg:'#icon-yifu'},
				{urlname:'购物车',hrefname:'cart',par:'4',svg:'#icon-gouwuche'},
				{urlname:'个人',hrefname:'user',par:'5',svg:'#icon-ren'}
			]
		}
	}
}
</script>

<style scoped="scoped">
	
			.footer{
				width: 100%;
				height: 1rem;
				background: #fbfbfb;
				position: fixed;
				bottom: 0;
				left: 0;
				display: flex;
			}
			.footer dl{
				flex: 1;
				text-align: center;
			}
			.footer .home a{
	   	        font-size: .3rem;
	   	        text-decoration: none;
	   	        color: #676767;
	         }
	         .footer .home .one{
	         	 width: .5rem;
	         	 height: .5rem;
	         }
	         .footernav{
	           margin-top: -.25rem;
	         }
	         
</style>